<template>
  <div style="height:45%;width:100%;position: absolute;top:20px;">
    <div class="volumeAccumIncome" style="height:100%;width:100%;" id="volumeAccumIncome"></div>
  </div>
</template>
 <script>
export default {
  name: "volumeAccumIncome",
 props: {
   volumeAccumIncomeData: {
     type: Object,
     default: () => {
       return {};
     }
   }
 },
 watch:{
   volumeAccumIncomeData(val){
   var minData = Math.min.apply(null, val.yAxis)<=Math.min.apply(null, val.y1Axis)?Math.min.apply(null, val.yAxis):Math.min.apply(null, val.y1Axis);
     this.getPie(val,minData);
   }
 },
 // mounted(){
 //   echarts.init(document.getElementById('volumeAccumIncome'))
 // },
  methods: {
    getPie(val,minData) {

      const that = this;
      var myChart = this.$echarts.init(document.querySelector(".volumeAccumIncome"));

      let option = {
          tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
                },
                formatter: '{b} <br /> {a0}: {c0}'+ "%"+'<br />{a1}: {c1} '+ "%"
              },
        grid: {
          top:'40px',
          left: "60px",
          right: "50px",
          bottom:'-10px',
         },
          legend: {
                 data: ['业务量月环比', '业务量年累计同比'],
                 right : '0',
                 top:'0',
             },
         xAxis: {
          type: 'category',
          // boundaryGap: false,
          axisLabel: {
            show:false,
            interval:0,
            // rotate:40 ,
            },
         data:val.xAxis,
          axisTick:{ //y轴刻度线
                        show:false
                    },
          axisLine:{
            show:true,
           lineStyle:{
               color:'#9399b6',
                type: 'dashed'
             },
          }
          },
        yAxis: [
          {
              type: 'value',
              // min: (minData-(minData+maxData1)%2)*2.2,
              // max: 100,
              // interval: 50,
                 splitLine:{show: false},  //去除网格线
              axisLabel: {
                  show:true,
              },
              splitArea:{
                  show:true,
                  areaStyle:{
                      color:'#fff'
                  },
              },
              axisTick:{ //y轴刻度线
                  show:false
              },
              axisLine:{ //y轴
                  show:true,
                  lineStyle:{
                    color:'#9399b6',
                  },
              },
          },
              {
                  type: 'value',
                  min:  minData*2,
                  // max:20,
                  splitLine:{show: true,
                  lineStyle:{
                      type: 'dashed'
                  }},  //去除网格线
                  // max: maxData*2,
                  // // interval: 50,
                  axisLabel: {
                      formatter: '{value} %',
                      show:true
                  },
                  axisTick:{ //y轴刻度线
                      show:false
                  },
                  axisLine:{ //y轴
                      show:true,
                      lineStyle:{
                        color:'#9399b6',
                      },
                  },
              },

            ],

        series: [
          {
              type: "bar",
              name: '月收入',
              // data: ['1000','2000','1000','2000'],
              barWidth :20,
              itemStyle:{
                  emphasis: {
                       barBorderRadius: 30
                    },
                 color: '#0070c0',
                 normal:{
                color:'#0070c0',
                 barBorderRadius:[10, 10, 0, 0],
                  label: {
                      show: true,
                      position: 'top',
                      textStyle: {
                         color: '#9399b6'
                       },
                   }
              }
          },
            },
          {
            type: "line",
             name: '业务量年累计同比',
            smooth: true,
            data:val.yAxis,
            yAxisIndex: 1,
            lineStyle: {
               normal: {
                   color: "#fbb858", // 线条颜色
               }
            },
            itemStyle : {
              normal: {
                color: '#fbb858',
                label : {
                  show: true,
                  position: 'top',
                  textStyle: {
                     color: '#fbb858'
                   },
                    formatter:"{c}%",
                  },
               },
            },
          },
          {
            type: "line",
             name: '业务量月环比',
            smooth: true,
             data:val.y1Axis,
            yAxisIndex: 1,
            lineStyle: {
               normal: {
                   color: "#69a7fb", // 线条颜色
               }
            },
            itemStyle : {
              normal: {
                color: '#69a7fb',
                label : {
                  show: true,
                  position: 'top',
                  textStyle: {
                     color: '#69a7fb'
                   },
                    formatter:"{c}%",
                  },
               },
            },
          },


      ],
      };
      myChart.setOption(option);
    }
  },
};
 </script>

 <style>
 </style>
